<template>
  <div class="mapContainer">
    <div class="mapLeft">
      <com-title :titles="tit"></com-title>
      <div class="echartsClass">
        <bin-charts :chartData="binData.dataTotle"></bin-charts>
      </div>
      <com-title :titles="changeSum"></com-title>
      <div class="echartsClass">
        <line-charts :chartData="lineData.dataTotle"></line-charts>
      </div>
    </div>
    <div class="mapCenter"></div>
    <div class="mapRight">
      <com-title :titles="carNum" :nums="carnum"></com-title>
      <div class="rightClass">
        <div v-for="(item, index) in carList" :key="index" class="xhList">
          <div>
            <span class="number">单号：</span
            ><span class="sum">{{ item.number }}</span>
          </div>
          <div>
            <span class="number">台州----宁波</span
            ><span class="sum">{{ item.address }}</span>
          </div>
        </div>
      </div>
      <div class="iconClass">
        <div
          v-for="(item, index) in iconList"
          :key="index"
          class="iconBg"
          @click="jumpPage(item)"
        >
          <img :src="item.img" alt="" />
          <div class="name">{{ item.name }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ComTitle from "./components/comTitle.vue";
import binCharts from "./components/binCharts.vue";
import lineCharts from "./components/lineCharts.vue";
// import iconButton from './components/iconButton.vue'

export default {
  name: "realMap",
  components: {
    ComTitle,
    binCharts,
    lineCharts,
    // iconButton
  },
  data() {
    return {
      binData: {
        dataTotle: {
          text: "18%",
          subtext: "方管",
          icon: "circle",
          show: true,
          itemStyle: true, //判断是否显示折现数值
          data: [
            { value: 1048, name: "螺纹钢" },
            { value: 735, name: "彩钢板" },
            { value: 580, name: "方管" },
            { value: 484, name: "圆钢" },
            { value: 300, name: "开平板" },
            { value: 150, name: "c型钢" },
          ],
        },
      },
      lineData: {
        dataTotle: {
          text: "业务员本月销售排行榜",
          xData: ["方管", "槽钢", "角钢", "铝锭", "圆钢", "铜棒", "钢管"],
          name: "万元",
          islegend: false, //是否显示图例
          series: [
            {
              name: "销售额",
              type: "bar",
              data: [150, 100, 175, 220, 125, 175, 125],
              barWidth: 10, //设置柱条的宽度
              isclor: true, //柱形条是否双色
            },

            {
              name: "销售额环比",
              type: "line",
              yAxisIndex: 1,
              data: [225, 165, 245, 250, 180, 205, 240],
            },
          ],
        },
      },

      tit: "本月钢材销量排行",
      changeSum: "本月交易总金额统计",
      carNum: "在途车辆订单",
      carnum: "（共16单）",
      carList: [
        {
          number: "ZGHWL20201103112735A1V2",
          address: "宁波市鄞州龙腾钢铁有限公司",
        },
        {
          number: "ZGHWL20201103112735A1V2",
          address: "宁波市鄞州龙腾钢铁有限公司",
        },
        {
          number: "ZGHWL20201103112735A1V2",
          address: "宁波市鄞州龙腾钢铁有限公司",
        },
        {
          number: "ZGHWL20201103112735A1V2",
          address: "宁波市鄞州龙腾钢铁有限公司",
        },
        {
          number: "ZGHWL20201103112735A1V2",
          address: "宁波市鄞州龙腾钢铁有限公司",
        },
      ],
      iconList: [
        { img: require("../assets/indexImage/mapIcon.png"), name: "实况地图" },
        {
          img: require("../assets/indexImage/videoIcon.png"),
          name: "实时影像",
        },
        {
          img: require("../assets/indexImage/detailIcon.png"),
          name: "订单详情",
        },
        {
          img: require("../assets/indexImage/inforIcon.png"),
          name: "司机信息",
        },
      ],
      chartData1: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
    };
  },
  methods: {
    jumpPage(val) {
      if (val.name == "实况地图") {
        this.$router.push("./practicalMap");
      } else if (val.name == "实时影像") {
        this.$router.push("./videoPage");
      } else if (val.name == "订单详情") {
        this.$router.push("./orderInformation");
      } else {
        this.$router.push("./driveInformation");
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.mapContainer {
  width: 100%;
  padding-left: 35px;
  padding-right: 35px;
  box-sizing: border-box;
  background-image: url("../assets/indexImage/bg.png");
  background-size: 100%;
  display: flex;
  justify-content: space-between;
  overflow: hidden;
  .mapLeft {
    width: 22%;
    .echartsClass {
      width: 100%;
      height: 275px;
      background-image: url("../assets/indexImage/echartsBg.png");
      background-size: 100%;
      background-repeat: no-repeat;
    }
  }
  .mapCenter {
    height: 605px;
    background-image: url("../assets/indexImage/mapBg.png");
  }
  .mapRight {
    .rightClass {
      width: 100%;
      height: 390px;
      padding: 15px;
      box-sizing: border-box;
      background-image: url("../assets/indexImage/rightBg.png");
      background-size: 100%;
      background-repeat: no-repeat;
      overflow-y: auto;

      .xhList {
        width: 100%;
        height: 90px;
        background-image: url("../assets/indexImage/blueBg.png");
        background-size: 100%;
        padding: 15px;
        box-sizing: border-box;
        background-repeat: no-repeat;
        div {
          width: 100%;
          text-align: left;
          height: 25px;
        }
        .number {
          font-size: 13px;
          font-family: "Alibaba-PuHuiTi-Bold";
          font-weight: 400;
          color: #01a7ff;
          margin-right: 10px;
          height: 30px;
        }
        .sum {
          font-size: 13px;
          font-family: "Alibaba-PuHuiTi-Bold";
          font-weight: 400;
          color: #15bbd1;
        }
      }
    }
    .iconClass {
      width: 100%;
      display: flex;
      margin-top: 10px;
      justify-content: space-between;
      img {
        width: 80px;
        height: 80px;
        cursor: pointer;
      }
      .name {
        font-size: 14px;
        font-family: "Alibaba-PuHuiTi-Bold";
        font-weight: 400;
        color: #60c6ff;
      }
    }
  }
}
//滚动条样式：
::-webkit-scrollbar {
  width: 10px;
}
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.1);
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px#0a7df194;
  background-color: rgba(0, 0, 0, 0.1);
}
</style>